<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title Page | 网页标签</title>

    <!-- Bootstrap CSS -->
    <!-- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> -->

    <!-- IE9 以下版本浏览器兼容HTML5的方法，使用本站的静态资源的html5shiv包 ( 不过应该基本用不到) -->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1 class="text-center">Hello World! | HTML5 </h1>
    <article>
      <header>
        <h1>注释：可以输出文章头部标题的区域</h1>
        <p>文章简单的摘要和描述</p>
      </header>
        <p>The rest of my home page...</p>
      </article>
      
      <section>
        <h5>注释：定义了文档的某个区域，比如，章节、头部、底部或者文档的其他区域 </h5>
        <p>欢迎访问博主个人主页：https://blog.weiyigeek.top</p>
      </section>
      
      <footer>
        <p>注释: 包含文档的作者、版权信息、使用条款链接、联系信息等</p>
        <address>Address：ChongQing</address>
        <p>Contact information: <a href="mailto:master@weiyigeek.top">master@weiyigeek.top</a>.</p>
      </footer>
      
      <p>注释: aside 标签定义其所处内容之外的内容</p>
      <aside>
        <h6>WeiyiGeeker</h6> 
        <p>一个想成为全栈的男人.</p>
      </aside>
      
      <details>
        <summary>注释："summary" 元素应该是 "details" 元素的第一个子元素</summary>   
        <p style="color:lightblue;font-size:12px;">欢迎关注【全栈工程师修炼指南】公众号</p>
      </details>
      
      <menu>
        <p>注释: 只有当 command 元素位于 menu 元素内时，该元素才是可见的暂不支持！ </p>
        <command type="button" label="command 标注">Click Me!</command>
      </menu>
      
      
      <p>注释: 定义对话框或窗口</p>
      <button onclick="openDialog()">打开对话框</button>
      <dialog id="myDialog">
        <p>这是一个对话框的内容。</p>
        <button onclick="closeDialog()">关闭</button>
      </dialog>
      <script>
      function openDialog() {
        var dialog = document.getElementById("myDialog");
        dialog.showModal(); // 打开对话框
      }
      function closeDialog() {
        var dialog = document.getElementById("myDialog");
        dialog.close(); // 关闭对话框
      }
      </script>

<p>注释: menu 标签浏览器未所有支持</p>
  <menu type="toolbar">
    <li>
    <menu label="File">
        <button type="button" onclick="file_new()">New...</button>
        <button type="button" onclick="file_open()">Open...</button>
        <button type="button" onclick="file_save()">Save</button>
    </menu>
    </li>
    <li>
    <menu label="Edit">
        <button type="button" onclick="edit_cut()">Cut</button>
        <button type="button" onclick="edit_copy()">Copy</button>
        <button type="button" onclick="edit_paste()">Paste</button>
    </menu>
    </li>
  </menu>


 <p>注释: 请结合 progress 标签与 JavaScript 一同使用，来显示任务的进度</p>
  <p>下载进度：</p>
  <progress value="50" max="100">50%</progress>
  <p>下载完成：</p>
  <progress></progress>
  <p>音量控制：</p>
  <meter value="0.7" min="0" max="1">70%</meter>
  
  
<p>注释: ruby 元素由一个或多个需要解释/发音的字符和一个提供该信息的 rt 元素组成，还包括可选的 rp 元素</p>
<ruby>
  漢 <rp>(</rp><rt>han</rt><rp>)</rp>
  字 <rp>(</rp><rt>zi</rt><rp>)</rp>
    
  汉 <rt>han</rt>
  字 <rp>(<rt>zi</rt>)</rp>
</ruby>


<p>我们在每天早上 <time>9:00</time> 开始营业。</p>
<p>为了迎接<time datetime="2023-06-22">端午节</time>的客户</p>

<p>这是一个较长的单词，可能会在中间换行：<wbr>supercalifragilisticexpialidocious</p>
    <!-- jQuery -->
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> -->
    <!-- Bootstrap JavaScript -->
    <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
  </body>
</html>